<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header"></head>
<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<style>
    input[type=email], input[type=url], input[type=search], input[type=tel],
    input[type=color], input[type=text], input[type=password], input[type=datetime],
    input[type=datetime-local], input[type=date], input[type=month], input[type=time],
    input[type=week], input[type=number], textarea {
    border-radius: 0 !important;
    color: #858585;
    background-color: #FFF;
    border: 1px solid #D5D5D5;
    padding: 5px 4px 6px;
    font-size: 14px;
    font-family: inherit;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

.table.table-bordered tr th, .table.table-bordered tr td {
    overflow: hidden;
    text-overflow: ellipsis;
}
select {
    padding: 3px 4px;
    height: 30px;
}

</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <form class="form-horizontal m-t" id="form">
                    <div class="form-group">
                        <ul class="nav nav-arrow-next nav-tabs" id="myTab">
                            <li class="active"><a href="#tab_basic">基本信息</a></li>
                            <li><a href="#tab_des">照片详情</a></li>
                        </ul>
                    </div>
                    <div class="tab-content" style="border: 0px;">
                        <input type="hidden" id="id" th:value="${centrePhoto.id}" />
                        <div class="tab-pane active" id="tab_basic">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">照片类型:</label>
                                <div class="col-sm-6">
                                    <select data-placeholder="" class="form-control chosen-select" id="typeId" tabindex="2">
                                        <option th:each="item: ${centrePhotoType}" th:selected="${centrePhoto.typeId}==${item.typeId}" th:text="${item.typeName}" th:value="${item.typeId}"></option>
                                    </select>
                                </div>

<!--                                <div class="col-sm-6">-->
<!--                                    <select data-placeholder="" class="form-control chosen-select" id="typeId" tabindex="2" th:field="*{centrePhoto.typeName}">-->
<!--                                        <option th:each="item: ${centrePhotoType.centrePhoto}" th:text="${item.typeName}" th:value="${item.typeId}"></option>-->
<!--                                    </select>-->
<!--                                </div>-->

                                <label class="col-sm-2 control-label" style="text-align: left"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">照片名:</label>
                                <div class="col-sm-6">
                                    <input id="photoName" name="photoName" placeholder="照片名"
                                           th:value="${centrePhoto.photoName}"
                                           class="form-control" type="text" maxlength="150">
                                </div>
                                <label class="col-sm-2 control-label" style="text-align: left"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">商户平台:</label>
                                <div class="col-sm-8">
                                    <select data-placeholder="" class="form-control chosen-select"  tabindex="30" id="centreId" name="centreId" th:field="*{centrePhoto.centreId}">
                                        <option value="" selected="selected">选择商户平台(不选择则为当前登陆商户)</option>
                                        <option th:each="item: ${centre}" th:text="${item.name}"  th:value="${item.centreId}"></option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" style="text-align: left"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">排序(从小到大,默认0):</label>
                                <div class="col-sm-6">
                                    <input id="sort" name="sort"
                                           th:value="${centrePhoto.sort}"
                                           class="form-control" type="text" maxlength="10">
                                </div>
                                <label class="col-sm-2 control-label" style="text-align: left"></label>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right"> 照片： </label>
                                <div class="col-sm-6">
                                    <div class="input-group ">
                                        <input type="text" name="thumb" id="thumb" value="" class="form-control"
                                               th:value="${centrePhoto.thumb}"
                                               autocomplete="off">
                                        <span class="input-group-btn">
                                                    <button class="btn btn-sm btn-default" type="button"  style="padding:7px 10px"
                                                            onclick="onSelectImgBtnClick('thumb','thumbImg')"
                                                    >选择图片</button>
                                                </span>
                                    </div>
                                    <div class="input-group " style="margin-top:.5em;">
                                        <img src="" id="thumbImg" style="max-width: 30%"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right"> 状态： </label>
                                <div class="col-sm-10" style="padding-top: 5px;">
                                    <label for="isDelete1" class="radio-inline">
                                        <input type="radio" name="isDelete" value="0" th:checked="${centrePhoto.isDelete == 0}" id="isDelete1"/> 启用</label>
                                    <label for="isDelete2" class="radio-inline">
                                        <input type="radio" name="isDelete" value="1" th:checked="${centrePhoto.isDelete == 1}" id="isDelete2"/> 禁用</label>
                                </div>
                            </div>
                        </div>
                        <!-- 文章内容部分 开始 -->
                        <div class="tab-pane" id="tab_des">
                            <div class="form-group">
                                <div class="col-sm-12">
                                        <textarea id="photoDesc" name="photoDesc"
                                                  th:text="${centrePhoto.photoDesc}"
                                                  style="height: 300px;">
                                        </textarea>
                                </div>
                            </div>
                        </div>
                        <!-- 文章内容部分 结束-->
                    </div>

                    <div class="form-group text-center">
                        <div class="col-sm-8 col-sm-offset-2">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
                            <div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
                        </div>
                    </div>
                </form>
            </div>
    </div>
</div>

<div th:include="centre/manage/include::footer"></div>
<script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/js/ueditor/custom.js?v=2"></script>
<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/appjs/sys/centrePhoto/updateCentrePhotoPage.js"></script>
<script type="text/javascript">
    function closeDow() {
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#timestart' , type: 'datetime'
        });

        laydate.render({
            elem: '#timeend' , type: 'datetime'
        });

        laydate.render({
            elem: '#upStartTime' , type: 'datetime'
        });

        laydate.render({
            elem: '#upEndTime' , type: 'datetime'
        });

    })

    $(function() {
        // tab切换
        $('#myTab a').click(function(e) {
            e.preventDefault();
            $('#myTab li').each(function() {
                $(this).removeClass('active')
            })
            $('.tab-content .tab-pane').each(function() {
                $(this).removeClass('active')
            })
            $(this).parent().addClass('active')
            id = $(this).attr('href')
            $(id).addClass('active');
        })
    })

    var ue = UE.getEditor('photoDesc');
    $('#photoDesc').data('editor', ue);
    $('#photoDesc').parents('form').submit(function() {
        if (ue.queryCommandState('source')) {
            ue.execCommand('source');
        }
    });
    UE.registerUI('uploadImage', function(editor, uiName){
        return new UE.ui.Button({
            name: '上传图片',
            title: '上传图片',
            cssRules:'background-position:-380px 0',
            onclick: function(){
                layer.open({
                    id:'selectImgs',
                    type : 2,
                    title : '批量选择图片',
                    maxmin : true,
                    shadeClose : false,
                    area : [ '60%', '70%' ],
                    content : '/platform/config/batchUploadImgUeditor'  // iframe的url
                });
            }
        });
    });


    // function saveProduct() {
    // 	$.ajax({
    // 		url :'/product/data/save',
    // 		contentType : "application/json",
    // 		dataType : "json",
    // 		type : 'POST',
    // 		data:JSON.stringify(data),
    // 		success :function(result){
    // 			if (result.code == 0){
    // 				$("#productid").val(result.msg);
    // 				layer.alert("保存成功", {icon: 6});
    // 			} else {
    // 				if(result.msg!="" && result.msg!=null){
    // 					layer.alert( result.msg, {icon: 5});
    // 				}else{
    // 					layer.alert("保存失败，请联系管理员", {icon: 5});
    // 				}
    //
    // 			}
    // 		}
    // 	})
    // }

    function onSelectImgBtnClick(inputId, imgId) {
        layer.open({
            id:'selectImg',
            type : 2,
            title : '选择图片',
            maxmin : true,
            shadeClose : false,
            area : [ '60%', '70%' ],
            content : '/platform/config/selectImg/' + inputId +"/"+ imgId // iframe的url
        });
    }

    /**
     * 加载图片URL
     * @param inputId
     * @param imgId
     * @param url
     */
    function loadImgUrl(inputId, imgId, url) {
        $('#'+inputId +'').val(url);
        $('#'+imgId +'').attr('src', url);
    }

    // 批量上传图片
    function selectImgs(domId) {
        layer.open({
            id:'selectImgs',
            type : 2,
            title : '批量选择图片',
            maxmin : true,
            shadeClose : false,
            area : [ '60%', '70%' ],
            content : '/platform/config/batchUploadImg/' + domId // iframe的url
        });
    }

    // ueditor 批量上传图片
    function selectImgsToUeditor() {
        layer.open({
            id:'selectImgsToUeditor',
            type : 2,
            title : '批量选择图片',
            maxmin : true,
            shadeClose : false,
            area : [ '60%', '70%' ],
            content : '/platform/config/batchUploadImg/' // iframe的url
        });
    }

    function loadImgsInfo(domId, result) {
        if (!result || result.length <1) {
            layer.msg(result.msg,{icon:7});
            return;
        }


        //editor.execCommand('inserthtml', `<img src=${url}>`);
        //editor.execCommand('inserthtml', `<img src=${url}>`);
        $('#' + domId).val(result.join(","));
        var imgHtml = '';
        for (var i=0;i<result.length;i++) {
            imgHtml += "<img style='max-width: 30%' src='"+result[i]+"'></img>";
        }
        $("#imgDiv").html(imgHtml);
    }

    // 加载图片进ueditor中
    function loadImgsToUeditor(result) {
        if (!result || result.length <1) {
            layer.msg(result.msg,{icon:7});
            return;
        }
        console.info(result);
        /* var imgUrlArray = result.split(","); */
        let editor = UE.getEditor('photoDesc');
        for (var i=0;i<result.length;i++) {
            console.info(i);
            var imgUrl = result[i];
            editor.execCommand('inserthtml', `<img src=${imgUrl}>`);
        }
    }
</script>
</body>
</html>
